$(function () {
    const form = layui.form
    const layer = layui.layer

    // 调用--获取文章类别
    getCate()
    // 初始化富文本编辑器
    initEditor()

    // 1.1 获取裁剪区域的 DOM 元素
    var $image = $('#image')
    // 1.2 配置选项
    const options = {
        // 纵横比
        aspectRatio: 400 / 280,
        // 指定预览区域
        preview: '.img-preview'
    }
    // 1.3 创建裁剪区域
    $image.cropper(options)

    // 定义--获取文章类别的方法
    function getCate () {
        $.ajax({
            method: 'get',
            url: '/my/article/cates',
            success: function (res) {
                if (res.status !== 0) {
                    return layer.msg('获取分类失败！')
                }
                // 渲染模板
                const htmlStr = template('tpl-cate', res)
                $('[name=cate_id').html(htmlStr)
                // 使用layui的form.render(type, filter);方法
                // 让layui重新渲染页面数据,参考官方文档
                form.render('select');
            }
        })
    }

    // 选择封面 的按钮，绑定点击事件
    $('#btnChooseImage').on('click', function () {
        // 手动触发文件选择框的点击事件
        $('#coverFile').click()
    })
    // 监听文件选择框的change事件
    $('#coverFile').on('change', function (e) {
        // 获取到文件列表数组
        const files = e.target.files
        if (files.length === 0) {
            // 如果没有选择文件，退出
            return
        }
        // 将图片转换为url地址
        let newImgURL = URL.createObjectURL(files[0])
        // 重新初始化裁剪区域
        $image
            .cropper('destroy')      // 销毁旧的裁剪区域
            .attr('src', newImgURL)  // 重新设置图片路径
            .cropper(options)        // 重新初始化裁剪区域
    })

    // 文章的发布状态，默认为 已发布 
    var artState = '已发布'
    //  点击“存为草稿”按钮，会修改状态为 草稿
    $('#btnSave2').on('click', function (e) {
        e.preventDefault
        artState = '草稿'
    })

    // 监听表单的提交事件
    $('#form-pub').on('submit', function (e) {
        // 1阻止默认提交
        e.preventDefault()
        // 2
        let fd = new FormData($(this)[0])
        // 3追加状态属性
        fd.append('state', artState)

        // 4将图片封面裁剪后的图片，输出为一个文件对象
        $image
            .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
                width: 400,
                height: 280
            })
            .toBlob(function (blob) {       // 将 Canvas 画布上的内容，转化为文件对象
                // 得到文件对象后，进行后续的操作
                // 5将文件追加到fd中
                fd.append('cover_img', blob)
                // fd.forEach((v, k) => {
                //     console.log(k, v);
                // })

                // 最后调用方法 发起ajax请求
                publishArticle(fd)
            })
    })

    // 发布文章的方法
    function publishArticle (fd) {
        $.ajax({
            method: 'post',
            url: '/my/article/add',
            data: fd,
            // 如果向服务器提交的是 FormData格式的数据
            // 必须添加以下两个配置项
            contentType: false,
            processData: false,
            success: function (res) {
                console.log(res);
                if (res.status !== 0) {
                    return layer.msg('发布文章失败')
                }
                layer.msg('发布文章成功！')
                // 跳转到文章列表页面
                location.href = '/article/art_list.html'
            }
        })
    }
})